<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>	
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="ui/bootstrap/css/bootstrap.css" />
<script type="text/javascript" src="scripts/vendor/LAB.js"></script>
<script>
$LAB.script('scripts/vendor/jquery-1.7.1.min.js').wait().script('scripts/vendor/knockout-2.0.0.js')
.script('scripts/vendor/jquery.form.js').script('scripts/vendor/common.js').wait(function(){
	
	$(function(){
		$.ajaxSettings.async = false;
		$('#reg_form').resetForm();
		$('#reg_form').submit(function(){
			var flag = validate();
			if(!flag) return false;
			//提交数据
			var c_url = 'commit-regist.action';
			ajax_post(c_url, $(this).serialize(), callSuccess);
			return false;
		});
	});
	
});

</script>
<script type="text/javascript">


function callSuccess(data){
	if(data.success){
		window.location = "login.action?username=" + $.trim($('#email').val());
	}else{
		$('#sub_btn').after("<div class='alert alert-error'>提交失败,试着刷新下页面?</div>");;
	}
}

function validate(){
	var showName = $.trim($('#showName').val());
	var email = $.trim($('#email').val());
	var password = $('#password').val();
	var repassword = $('#repassword').val();
	var msg = $('#msg');
	if($.isEmptyObject(showName)){
		msg.html('显示名不能空').show();
		$('#showName').focus();
		return false;
	}else{
		if(existShowname(showName)){
			msg.html('显示名已经存在').show();
			$('#showName').focus();
			return false;
		}
	}
	
	if($.isEmptyObject(email)){
		msg.html('邮箱不能空').show();
		$('#email').focus();
		return false;
	}else{
		if(!is_email(email)){
			msg.html('邮箱的格式不对哦。').show();
			$('#email').focus();
			return false;
		}else{
			if(existUsername(email)){
				msg.html('邮箱已经被注册。').show();
				$('#email').focus();
				return false;
			}
		}
	}
	
	if(is_empty(password) || is_empty(repassword)){
		msg.html('密码和重复不能为空').show();
		return false;
	}else if(password != repassword){
		msg.html('两次密码不相同').show();
		return false;
	}
	
	return true;
}


function existShowname(name){
	var url = 'utils/exist-showname.action?showName=' + name;
	var result = true;
	$.getJSON(url, function(json){
		if(json.success){
			result = json.exist;
		}else{
			alert('加载数据失败');
		}
	});
	return result;
}

function existUsername(name){
	var url = 'utils/exist-username.action?username=' + name;
	var result = true;
	
	$.getJSON(url, function(json){
		if(json.success){
			result = json.exist ;
		}else{
			alert('加载数据失败');
		}
	});
	
	return result;
}

</script>
<title>会员注册</title>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="span12">
				
				<form id="reg_form" action="commit-regist.action" class="form-horizontal">
					<fieldset>
						<legend>注册<s:text name="web-name"/>会员</legend>
						<div class="control-group">
						<div id="msg" class="clearfix alert alert-error hide"></div>
						</div>
						<div class="control-group">
							<label for="showName" class="control-label">显示名</label>
							<div class="controls">
								<input id="showName" name="person.showName" type="text" class="input-xlarge" />
								<p id="show_info" class="help-block input-xlarge">显示的名称如：李老师。但必须唯一</p>
							</div>
						</div>
						<div class="control-group">
							<label for="email" class="control-label">您的邮箱</label>
							<div class="controls">
								<input id="email" name="user.username" type="text" class="input-xlarge" />
								<p id="name_info" class="help-block input-large">用来登录,建议使用常用的Email</p>
							</div>
						</div>
						<div class="control-group">
							<label for="password" class="control-label">设置密码</label>
							<div class="controls">
								<input id="password" name="user.password" type="password" />
								<p id="pass_info" class="help-block">6-16个字符</p>
							</div>
						</div>
						<div class="control-group">
							<label for="repassword" class="control-label">重复密码</label>
							<div class="controls">
								<input id="repassword" type="password" />
							</div>
						</div>
						<div class="form-actions">
							<button id="sub_btn" class="btn btn-primary" type="submit">注册</button>&nbsp; &nbsp;
							<a href="login.action">已注册,登录&gt;</a>
						</div>
					</fieldset>
				</form>

			</div>
		</div>
	</div>
</body>
</html>